<template>
	<view class="pages">
		<form @submit="submit">
			<view class="messageBox">
				<view class="item">
					<view class="left">联系人</view>
					<input type="text" value="" placeholder="请输入您的姓名" placeholder-style="color:#878787" name="name" />
				</view>
				<view class="item">
					<view class="left">联系电话</view>
					<input type="number" value="" placeholder="请输入您的手机号" placeholder-style="color:#878787" name="mobile" />
				</view>
				<view class="item">
					<view class="left">服务方式</view>
					<view class="uni-list-cell-db">
					    <picker @change="bindPickerChange" :value="index" :range="array">
					        <view class="uni-input" :class="ifPicker ? 'textColor' : 'ZW'">{{ifPicker ? '请选择服务方式' : array[index]}}</view>
					    </picker>
					</view>
					<uni-icon type="arrow" size="18" color="#878787"></uni-icon>
				</view>
				<view class="item" @click="openAddress()" v-if="index == 0 ? false : true">
					<view class="left">通讯地址</view>
					<uni-icon type="arrow" size="18" color="#878787"></uni-icon>
				</view>
				<view class="expressageBox" v-if="index == 0 ? false : true">
					<view class="title">
						<view class="left">快递状态</view>
						<view class="uni-list-cell-db" style="flex: 1">
						    <picker @change="bindPickerChange2" :value="index2" :range="array2">
						        <view class="uni-input" :class="ifPicker2 ? 'textColor' : 'ZW'">{{ifPicker2 ? '请选择快递状态(默认已寄出)' : array2[index2]}}</view>
						    </picker>
						</view>
						<uni-icon type="arrow" size="18" color="#878787"></uni-icon>
					</view>
					<view class="expressageData" v-if="!ifPicker2 && index2 == 1">
						<input type="text" value="" placeholder="快递公司(选填)" placeholder-style="color:#878787;font-size: 24upx;text-align:center" name="expressageName" class="inputC" style="width: 48%;height: 40upx" />
						<input type="text" value="" placeholder="快递单号(选填)" placeholder-style="color:#878787;font-size: 24upx;text-align:center" name="expressageNum" class="inputC" style="width: 48%;height: 40upx" />
					</view>
				</view>
				<view class="selectBox">
					<view class="title">
						<view class="left">选择服务</view>
						<view class="right" @click="openBottomPage(0)">
							{{serveList[0] ? '已添加'+ serveList.length +'双鞋子' :'选择相关清洁服务'}}
							<uni-icon type="arrow" size="18" color="#878787"></uni-icon>
						</view>
					</view>
					<view class="content" v-if="serveList[0]">
						<view class="shoeList">
							<view class="shoeItem" v-for="(item, index) in serveList" :key="index"  @click="openBottomPage(1,index,item.standardId,item.additionalId)">
								<view class="headImg">
									<view class="deleteShoe" @click="deleteShoe(index)" @click.stop>
										<image src="/static/images/reeor2.png" mode="" class="img_del"></image>
									</view>
									<image src="/static/images/logo.jpg" mode="" class="img_headImg"></image>
								</view>
								<view class="footText">
									{{item.serveText}}
								</view>
								<view class="price">￥{{item.servePrice}}</view>
							</view>
						</view>
						<view class="btn" @click="openBottomPage(0)">
							<view class="plus">
								<image src="/static/images/add-select.png" mode=""></image>
							</view>
							<text class="text">再添加一双鞋子</text>
						</view>
					</view>
				</view>
				<view class="imgUpLoad">
					<view class="title">鞋子图片<text style="font-size: 24upx;">(最多3张)</text></view>
					<view class="imgBox">
						<view class="imgItem" v-for="(item, index) in imgArr" :key="index">
							<view class="deleteImg" @click="deleteImg(index)">
								<image src="/static/images/reeor2.png" mode="" class="img_del"></image>
							</view>
							<image :src="item" mode=""></image>
						</view>
						<view class="imgItem" @click="upLoadImg()" v-if="imgArr.length >= 3 ? false : true">
							<image src="/static/images/upload.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="item" @click="openRemark()">
					<view class="left">订单备注</view>
					<view class="right2" style="font-style: italic;">{{remark ? remark : '(选填)'}}</view>
					<uni-icon type="arrow" size="18" color="#878787"></uni-icon>
				</view>
				<view class="item" v-if="is_coupon">
					<view class="left">优惠券</view>
					<view class="right3" @click="openSelectCoupon(coupon_log_list,priceAll)">{{coupon_log_id == '' ? '查看可用优惠券' : '-' + coupon_value}}</view>
					<uni-icon type="arrow" size="18" color="#878787"></uni-icon>
				</view>
				<view class="item">
					<view class="left">余额抵扣</view>
					<view class="right3" style="text-align: left;font-style: italic;">当前余额￥{{balance}}</view>
					<view class="right4">
						<switch :checked="payType" color="#000000" @change="btnCheck()" style="transform:scale(0.7)" />
					</view>
				</view>
				<view class="item">
					<view class="left">消息通知</view>
					<view class="right3" style="text-align: left;font-style: italic;color: #878787"><text style="color: #1aad19">实时获取订单进度</text>(必选)</view>
					<view class="right4">
						<switch :checked="newsType" color="#000000" @change="btnCheck2()" style="transform:scale(0.7)" />
					</view>
				</view>
				<view class="bottomPage" v-if="ifBottomPage" catchtouchmove="move">
					<view class="shadow" :class="ifBottomPage ? 'start2' : 'ZW'">
						<view class="pageBox" :class="ifBottomPage ? 'start' : 'ZW'">
							<view class="head">
								<view class="imgLogo">
									<image src="/static/images/logo.jpg" mode=""></image>
								</view>
								<view class="info">
									<view class="price">￥{{servePrice}}</view>
									<view class="text">已选: {{serveTitle}}</view>
								</view>
								<view class="reeor" @click="closeBottomPage()">
									<image src="/static/images/reeor.png" mode=""></image>
								</view>
							</view>
							<view class="content">
								<view class="title">标准服务</view>
								<view class="list" style="margin-bottom: 20upx;">
									<view class="item" :class="standardId == item.id ? 'btnActive' : 'ZW'" v-for="(item, index) in serveArr.standard.data" :key="index" @click="btn(item.id)">{{item.title}}</view>
								</view>
								<view class="title">附加服务</view>
								<view class="list" style="padding-bottom: 30upx;border-bottom: 1px solid #f5f5f9;">
									<view class="item" :class="additionalId|idFormat(item.id) == -1 ? 'ZW' : 'btnActive'" v-for="(item, index) in serveArr.additional.data" :key="index" @click="btn2(item.id)">{{item.title}}</view>
								</view>
								<view class="payNum" v-if="status == 1 ? false : true">
									<view class="text">购买数量</view>
									<view>
										<sunui-stepper :label='1' :max="10" :val="1" :step="1" :min="1" @change="stepper3"></sunui-stepper>
									</view>
								</view>
								<button @click="affirm()">确认服务方式</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="agreement">
				<checkbox-group @change="bindcheckbox">
					<checkbox :value="value" checked color="#1aad19" />
					阅读并同意<text @click="openProtocol">《用户服务协议》</text>
				</checkbox-group>
			</view>
			<view class="footer">
				<view class="left">
					应付金额: ￥{{amountPayable}}
				</view>
				<button form-type="submit">提交订单</button>
			</view>
		</form>
		<s-model v-if="ifShow" @closeModel="closeModel()"  @rejectEvent="rejectEvent()" :template="template"></s-model>
		<s-model2 v-if="ifShow2" @closeModel2="closeModel2()" @acceptEvent="acceptEvent()"></s-model2>
	</view>
</template>

<script>
	import { dns } from '@/pages/dns.js';
	import { HTTP } from '@/pages/http.js';
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	import sunuiStepper from "@/components/sunui-stepper/sunui-stepper.vue";
	//showModel组件
	import sModel from "@/components/uni-showmodel.vue";
	import sModel2 from "@/components/uni-showmodel2.vue"
	let http = new HTTP()
	export default {
		data(){
			return {
				ifPicker: true,
				array: ['店内', '邮寄'],
				ifSelect: 0,//判断是否选择了服务方式
				index: 0,//服务方式选择
				ifPicker2: true,
				array2: ['未寄出', '已寄出'],
				index2: 0,//服务方式选择
				remark: '',//备注内容
				imgArr: [],//预览展示的图片列表
				imgUploadArr: [],//上传的的图片列表
				ifBottomPage: false,//弹出层开关
				serveArr: [],//进入页面获取的可选服务列表
				serveIdObj: {},//已选服务列表id(每一双)
				serveIdArr: [],//要上传的服务id(所有鞋子)
				standardId: 0,//已选标准服务id
				additionalId: [],//已选附加服务id
				objServePrice: 0,//展示列表总价格
				objServeTitle: '',//展示列表文字
				serveList: [],//展示列表总信息
				status: 0,//添加鞋子或修改鞋子的状态
				shoeIndex: 0,//鞋子的索引
				value: [''],//监听是否checkbox是否选中
				address: '',//收货地址,
				priceAll: 0,//总金额
				payType: 1,//是否余额抵扣
				newsType: 0,//是否开启消息通知
				balance: 0,//余额
				is_coupon: 0,//是否显示优惠券
				coupon_log_list: [],//可用优惠券列表
				coupon_value: 0,//优惠券金额
				coupon_log_id: '',//优惠券id
				num: 1,//服务数量
				ifShow: false,
				ifShow2: false,
				template: []//订阅消息id
			}
		},
		onLoad() {
			this.orderBase();
			this.getServeArr();
			uni.setStorageSync("remark", '');
			uni.setStorageSync("face_value", 0);
			uni.setStorageSync("coupon_log_id", '');
		},
		onShow() {
			//备注
			var remark = uni.getStorageSync("remark");
			this.remark = remark;
			//优惠券
			var face_value = uni.getStorageSync("face_value");
			var coupon_log_id = uni.getStorageSync("coupon_log_id");
			this.coupon_value = face_value;
			this.coupon_log_id = coupon_log_id;
		},
		components: {
			uniIcon,
			sunuiStepper,
			sModel,
			sModel2
		},
		filters:{
			idFormat(value,id){
				return value.indexOf(id);
			}
		},
		computed:{
			serveTitle(){//处理title
				var that = this;
			    var standardTitle = '';//标准服务
				var additionalTitle = [];//附加服务
				this.serveArr.standard.data.forEach((val, ind)=>{//循环已选标准按钮的id
					if(this.standardId == val.id){
						standardTitle = val.title;
					}
				})
				if(this.additionalId[0]){
					this.additionalId.forEach((value, index)=>{//循环已选附加按钮的id
						this.serveArr.additional.data.forEach((val, ind)=>{
							if(value == val.id){
								additionalTitle.push(val.title)
							}
						})
					})
				}
				additionalTitle = additionalTitle.join(' ');
				that.objServeTitle = standardTitle + ' ' + additionalTitle;
				return standardTitle + ' ' + additionalTitle
			},
			servePrice(){//处理price
				var that = this;
				var arr = [];
				var standardPrice = 0;//标准服务
				var additionalPrice = 0;//附加服务
				this.serveArr.standard.data.forEach((val, ind)=>{//循环已选标准按钮的id
					if(this.standardId == val.id){
						standardPrice = parseFloat(val.price);
					}
				})
				if(this.additionalId[0]){
					this.additionalId.forEach((value, index)=>{//循环已选按钮的id
						this.serveArr.additional.data.forEach((val, ind)=>{
							if(value == val.id){
								arr.push(val.price)
							}
						})
					})
					arr.forEach((val, ind)=>{
						additionalPrice = additionalPrice + parseFloat(val);
					})
				};
				that.objServePrice = standardPrice + additionalPrice;
				return standardPrice + additionalPrice
			},
			amountPayable(){//处理应付金额
				var price = 0;
				if(this.payType == 1){//余额抵扣
					(this.priceAll - this.coupon_value - this.balance) >= 0 ? price = (this.priceAll - this.coupon_value - this.balance) : price = 0;
				}else{
					(this.priceAll - this.coupon_value) >= 0 ? price = (this.priceAll - this.coupon_value) : price = 0;
				}
				console.log(price);
				return price.toFixed(2)
			}
		},
		methods:{
			//右上角分享功能
			onShareAppMessage: function (res) {
			  return {
			    title: 'unclearcare 球鞋洗护',
			    path: '/pages/index/index',
			    success: function (res) {
				  // 转发成功
			    },
			    fail: function (res) {
				  // 转发失败
			    }
			  }
			},
			bindPickerChange: function(e) {
				this.index = e.target.value;
				this.ifSelect = 1;
				this.ifPicker = false;
			},
			bindPickerChange2: function(e) {
				this.index2 = e.target.value;
				console.log(this.index2);
				this.ifPicker2 = false;
			},
			bindTextArea(e){//输入框输入事件
				this.cursor = e.detail.cursor;
			},
			bindcheckbox(e){//checkbox监听是否选中
				this.value = e.detail.value
				console.log(e.detail.value);
			},
			openRemark(){//打开订单备注
				uni.navigateTo({
					url: './remark/index?remark=' + this.remark
				})
			},
			openProtocol(){//查看用户协议
				uni.navigateTo({
					url: './protocol/index'
				})
			},
			openAddress(){//打开收货地址
				var that = this;
				uni.chooseAddress({
					success(res){
						console.log(res);
						that.address = res.provinceName + res.cityName + res.countyName + res.detailInfo
					},
					fail(err){
						console.log(err);
						if(err.errMsg == "chooseAddress:fail auth deny"){//取消地址授权
							uni.showModal({
								title: '提示',
								content: '收货地址授权失败,是否重新授权?',
								success: (res)=>{
									if (res.confirm) {
										wx.openSetting({
											success(res){
												console.log(res);
												if(res.authSetting["scope.address"]){//授权成功
													that.openAddress();
												}else{
													uni.showToast({
														icon: 'none',
														title: '您取消了授权'
													})
												}
											}
										})
									}
								}
							})
						}
						if(err.errMsg == "chooseAddress:fail cancel"){}//取消地址选择
					}
				})
			},
			upLoadImg(){//上传图片
				let that = this;
				var count = 3 - this.imgArr.length;
				uni.chooseImage({
				    count: count, //默认9
				    sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				    success: (chooseImageRes)=>{
						const tempFilePaths = chooseImageRes.tempFilePaths;
						tempFilePaths.forEach((val, ind)=>{
							uni.uploadFile({
								url: dns + 'upload/image', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[ind],
								name: 'file',
								success: (uploadFileRes) => {
									uploadFileRes = JSON.parse(uploadFileRes.data);
									if(uploadFileRes.code == 200){
										that.imgArr.push(uploadFileRes.data.url);
										that.imgUploadArr.push(uploadFileRes.data.path);
									}
									if(uploadFileRes.code == 500){
										uni.showToast({
											icon: 'none',
											title: uploadFileRes.msg
										})
									}
								}
							})
						})
				    }
				});
			},
			deleteImg(index){//删除图片
				this.imgArr.forEach((val,ind)=>{
					if(index == ind){
						this.imgArr.splice(index,1);
					}
				})
			},
			openBottomPage(status,index,standardId,additionalId){//选择服务方式，打开弹出层
				console.log(status,index,standardId,additionalId);
				this.ifBottomPage = true;
				this.num = 1;
				//弹出层初始化
				if(status == 0){//重置
					this.status = 0;
					this.SelectServeArr = {};
					if(this.serveArr.standard.data[0].id){
						this.serveIdObj = {};
						this.serveIdObj.standard = this.serveArr.standard.data[0].id;
						this.serveIdObj.additional = '';
					}
					console.log(this.serveIdObj);
					this.standardId = this.serveArr.standard.data[0].id;
					this.additionalId = [];
				};
				if(status == 1){//修改
					this.status = 1;
					this.shoeIndex = index;
					this.standardId = standardId;
					this.additionalId = additionalId;
				}
			},
			closeBottomPage(){//关闭弹出层
				this.ifBottomPage = false;
			},
			orderBase(){//获取余额和优惠券
				uni.showLoading({
					title: '加载中..'
				})
				http.request({
					url: 'order/base',
					success:(res)=>{
						uni.hideLoading();
						if(res.data.code == 200){
							this.balance = res.data.data.balance;
							this.is_coupon = res.data.data.is_coupon
							this.coupon_log_list = JSON.stringify(res.data.data.coupon_log_list);
							this.template = res.data.data.template;
						}
					}
				})
			},
			getServeArr(){//获取服务方式选项
				http.request({
					url: 'service',
					success:(res)=>{
						if(res.data.code == 200){
							this.serveArr = res.data.data;
							this.standardId = res.data.data.standard.data[0].id;
						}
					}
				})
			},
			btn(id){//点击服务标签
				this.standardId = id;
				this.serveIdObj.standard = id;
			},
			btn2(id){//点击附加标签
				//处理id
				this.additionalId.indexOf(id) == -1 ? this.additionalId.push(id) : this.additionalId.forEach((val, ind)=>{
					if(val == id){
						this.additionalId.splice(ind,1);
					}
				})
				
				this.serveIdObj.additional = this.additionalId.join();
				
			},
			stepper3(e) {
				this.num = e.val;
			},
			affirm(){//确认服务
			    //关闭弹出层
				this.ifBottomPage = false;
				//处理要展示的鞋子列表
				var obj = {};
				if(this.status == 0){//添加鞋子
					obj.servePrice = this.objServePrice;
					obj.serveText = this.objServeTitle;
					obj.standardId = this.standardId;
					obj.additionalId = this.additionalId;
					for(var i = 0 ;i < this.num; i++){
						this.serveList.push(obj);
						//处理要上传的鞋子id
						this.serveIdArr.push(this.serveIdObj);
					}
				}
				if(this.status == 1){//修改鞋子
					obj.servePrice = this.objServePrice;
					obj.serveText = this.objServeTitle;
					obj.standardId = this.standardId;
					obj.additionalId = this.additionalId;
					this.serveList.forEach((val, ind)=>{
						if(this.shoeIndex == ind){
							this.serveList[ind] = obj;
							this.serveIdArr[ind] = this.serveIdObj;
						}
					});
				}
				console.log(this.serveList);
				this.priceCalculate();
			},
			priceCalculate(){//所有鞋子的总金额
				this.priceAll = 0;
				this.serveList.forEach((val, ind)=>{
					this.priceAll = this.priceAll + val.servePrice;
				})
			},
			deleteShoe(index){//删除鞋子
				uni.showModal({
				    title: '提示',
				    content: '您确定要删除这双鞋子吗',
				    success: (res)=>{
				        if (res.confirm) {
							this.serveList.splice(index,1);
							this.serveIdArr.splice(index,1);
							this.priceCalculate();
				        }
				    }
				});
			},
			btnCheck(){//是否勾选余额抵扣
				this.payType == 1 ? this.payType = 0 : this.payType = 1
			},
			btnCheck2(){//是否开启订阅消息
				this.newsType == 1 ? this.newsType = 0 : this.newsType = 1;
				if(this.newsType == 1){
					this.ifShow = true;
				};
				if(this.newsType == 0){
					this.ifShow2 = true;
				}
			},
			closeModel(e){//接收子组件的值
				this.ifShow = e
			},
			closeModel2(e){//接收子组件的值
				this.ifShow2 = e
			},
			rejectEvent(e){//接收子组件的值
				this.newsType = e;
				console.log(this.newsType);
			},
			acceptEvent(e){
				this.newsType = e;
				console.log(this.newsType);
			},
			openSelectCoupon(list,priceAll){//选择可用优惠券
				uni.navigateTo({
					url: './selectCoupon/index?list=' + list + '&priceAll=' + priceAll
				})
			},
			submit(e){//提交表单
				var type,data,name,phone,service,remark,is_send,address,express_name,express_number,photos,coupon_log_id,is_balance;
				type = parseInt(this.index) + 1;
				console.log(type,this.index);
				name = e.detail.value.name;
				phone = e.detail.value.mobile;
				service = JSON.stringify(this.serveIdArr);//鞋子id
				remark = this.remark;
				coupon_log_id = this.coupon_log_id;
				is_balance = this.payType //是否勾选余额
				photos = JSON.stringify(this.imgUploadArr);
				if(!name || !phone){
					uni.showToast({
						icon: 'none',
						title: '请完善您的信息!'
					})
					return false;
				}
				if(this.ifSelect == 0){
					uni.showToast({
						icon: 'none',
						title: '请选择服务方式!'
					})
					return false;
				}
				if(service.length == 0){
					uni.showToast({
						icon: 'none',
						title: '请选择相关清洁服务!'
					})
					return false;
				}
				if(this.imgUploadArr.length == 0){
					uni.showToast({
						icon: 'none',
						title: '请上传您的鞋子图片!'
					})
					return false;
				}
				if(this.value.length !== 1){
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意《用户服务协议》'
					})
					return false;
				}
				
				if(this.newsType == 0){
					uni.showToast({
						icon: 'none',
						title: '请开启"消息通知",实时获取订单进度!'
					})
					return false;
				}
				if(type == 1){//店内
					data = {
						name,
						phone,
						type,
						is_send: 0,
						service,
						remark,
						photos,
						coupon_log_id,
						is_balance
					}
				}
				
				if(type == 2){//邮寄
					is_send = this.index2;
					console.log(is_send);
					address = this.address;
					express_name = e.detail.value.expressageName ? e.detail.value.expressageName : '';
					express_number = e.detail.value.expressageNum ? e.detail.value.expressageNum : '';
					
					data = {
						name,
						phone,
						type,
						service,
						remark,
						is_send,
						address,
						express_name,
						express_number,
						photos,
						coupon_log_id,
						is_balance
					}
				}
				http.request({
					method: 'POST',
					data: data,
					url: 'order/create',
					success:(res)=>{
						if(res.data.code == 200){
							if(res.data.data.status == 0){
								uni.showToast({
									title: res.data.msg
								})
								setTimeout(()=>{
									uni.navigateTo({
										url: '/pages/me/order/index?num=' + 1
									})
								},2000)
							}
							if(res.data.data.status == 1){
								uni.showToast({
									title: res.data.msg
								})
								setTimeout(()=>{
									uni.navigateTo({
										url: './orderDetail/index?id=' + res.data.data.order_id
									})
								},1500)
							}
							
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		min-height: 100%;
		background-color: #f5f5f9;
	}
	.pages{
		background-color: #f5f5f9;
		padding-top: 20upx;
		min-height: 100%;
		padding-bottom: 120upx;
		.messageBox{
			background-color: #f5f5f9;
			min-height: 100%;
			.item{
				position: relative;
				padding: 0 30upx;
				display: flex;
				line-height: 80upx;
				font-size: 30upx;
				background-color: #fff;
				margin-bottom: 15upx;
				.left{
					width: 140upx;
				}
				.right2{
					flex: 1;
					font-size: 24upx;
					color: #878787;
					padding-right: 40upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis
				}
				.right3{
					width: 320upx;
					font-size: 24upx;
					color: #878787;
					padding-right: 40upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-align: right;
				}
				.right4{
					flex: 1;
					font-size: 24upx;
					color: #878787;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-align: right;
				}
				.uni-list-cell-db{
					flex: 1;
					picker{
						width: 100%;
						.textColor{
							color: #878787
						}
					}
				}
				input{
					height: 80upx;
				}
				uni-icon{
					position: absolute;
					right: 30upx;
					top: 8upx;
				}
			}
			.expressageBox{
				position: relative;
				padding: 0 30upx 0 30upx;
				background-color: #fff;
				font-size: 30upx;
				margin-bottom: 15upx;
				.title{
					line-height: 80upx;
					font-size: 30upx;
					display: flex;
					.left{
						width: 140upx;
					}
					.right{
						flex: 1;
						color: #878787;
					}
					uni-icon{
						position: absolute;
						right: 30upx;
						top: 8upx;
					}
				}
				.expressageData{
					display: flex;
					justify-content: space-between;
					padding-bottom: 30upx;
					.inputC{
						background-color: #eee;
						font-size: 24upx;
						text-align:center
					}
				}
			}
			.selectBox{
				position: relative;
				padding: 0 30upx 0 30upx;
				background-color: #fff;
				font-size: 30upx;
				margin-bottom: 15upx;
				.title{
					line-height: 80upx;
					font-size: 30upx;
					display: flex;
					.left{
						width: 140upx;
					}
					.right{
						flex: 1;
						color: #878787;
					}
					uni-icon{
						position: absolute;
						right: 30upx;
						top: 8upx;
					}
				}
				.content{
					background-color: #fff;
					padding-bottom: 30upx;
					.shoeList{
						display: flex;
						overflow-x: scroll;
						white-space: nowrap;
						margin-bottom: 20upx;
						.shoeItem{
							width: 160upx;
							margin-right: 15upx;
							flex-shrink: 0;//解决父元素display:flex布局下的子元素宽度无效问题
							.headImg{
								position: relative;
								width: 100%;
								height: 160upx;
								.deleteShoe{
									position: absolute;
									right: 0;
									top: 0;
									width: 40upx;
									height: 40upx;
									background-color: rgba(0,0,0,0);
									.img_del{
										width: 100%;
										height: 100%;
									}
								}
								
								.img_headImg{
									width: 100%;
									height: 100%;
								}
							}
							.footText{
								width: 100%;
								font-size: 24upx;
								text-align: center;
								overflow : hidden;
							    text-overflow: ellipsis;
								white-space: normal;
								min-height: 64upx;
							    display: -webkit-box;
							    -webkit-line-clamp: 2;
							    -webkit-box-orient: vertical;
							}
							.price{
								font-size: 28upx;
								font-weight: bold;
								text-align: center;
							}
						}
					}
					.btn{
						position: relative;
						height: 80upx;
						line-height: 80upx;
						border: 1px solid rgba(0,0,0,.3);
						text-align: center;
						.plus{
							position: absolute;
							top: 15upx;
							left: 225upx;
							width: 50upx;
							height: 50upx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.text{
							display: inline-block;
							padding-left: 55upx;
							font-size: 28upx;
							color: #000;
						}
					}
				}
			}
			.imgUpLoad{
				position: relative;
				background-color: #fff;
				padding: 0 30upx 30upx 30upx;
				margin-bottom: 15upx;
				.title{
					line-height: 80upx;
					font-size: 30upx;
				}
				.imgBox{
					display: flex;
					.imgItem{
						position: relative;
						width: 160upx;
						height: 160upx;
						margin-right: 15upx;
						image{
							width: 100%;
							height: 100%;
						}
						.deleteImg{
							position: absolute;
							right: 0;
							top: 0;
							width: 40upx;
							height: 40upx;
							background-color: rgba(0,0,0,0);
							.img_del{
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
			.bottomPage{//服务选择弹出层
				position: fixed;
				top: 0;
				left: 0;
				z-index: 999;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0);
				.shadow{
					position: relative;
					width: 100%;
					height: 100%;
					background-color: rgba(0,0,0,.6);
					.pageBox{
						position: absolute;
						bottom: 0;
						left: 0;
						background-color: #fff;
						width: 100%;
						border-top-left-radius: 30upx;
						border-top-right-radius: 30upx;
						overflow: hidden;
						.head{
							position: relative;
							display: flex;
							padding-bottom: 20upx;
							border-bottom: 1px solid #f5f5f9;
							.imgLogo{
								width: 180upx;
								height: 180upx;
								border-radius: 10upx;
								overflow: hidden;
								margin-right: 20upx;
								image{
									width: 100%;
									height: 100%;
								}
							}
							.info{
								width: 490upx;
								display: flex;
								flex-direction: column;
								justify-content: flex-end;
								.price{
									font-size: 34upx;
									font-weight: bold;
								}
								.text{
									font-size: 28upx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
							}
							.reeor{
								position: absolute;
								right: 0;
								top: 0;
								width: 50upx;
								height: 50upx;
								image{
									width: 100%;
									height: 100%;
								}
							}
						}
						.content{
							position: relative;
							padding-top: 30upx;
							height: calc(100% - 180upx);
							.title{
								font-size: 30upx;
								margin-bottom: 15upx;
							}
							.list{
								display: flex;
								flex-wrap: wrap;
								min-height: 116upx;
								.item{
									background-color: #f5f5f9;
									border-radius: 20upx;
									font-size: 24upx;
									margin-right: 20upx;
									height: 45upx;
									line-height: 45upx;
									text-align: center;
								}
								.btnActive{
									background-color: rgba(0,0,0,.8);
									color: #fff;
								}
							}
							.payNum{
								margin-top: 20upx;
								display: flex;
								justify-content: space-between;
								.text{
									font-size: 30upx;
									line-height: 52upx;
								}
								
							}
							button{
								position: absolute;
								left: 0;
								top: 525upx;
								width: 100%;
								height: 70upx;
								line-height: 70upx;
								background-color: #000000;
								border-radius: 70upx;
								font-size: 28upx;
								color: #fff;
							}
						}
					}
					@-webkit-keyframes Hanimation
					{
					    from {height: 0upx;padding: 0upx}
					    to {height: 840upx;padding: 20upx}
					}
					
					.start{//弹出层高度
					    animation: Hanimation .3s ease-in;
						height: 840upx;
						padding: 20upx;
					}
					@-webkit-keyframes Panimation
					{
					    from {opacity: 0}
					    to {opacity: 1}
					}
					
					.start2{//遮罩层透明度
					    animation: Panimation .5s ease-in;
					}
				}
			}
		}
		.agreement{
			padding: 30upx 20upx;
			font-size: 28upx;
			checkbox{
				transform:scale(0.9);
				color: #1aad19;
				margin-right: 6upx;
			}
			text{
				color: #1aad19;
			}
		}
		.footer{
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #fff;
			width: 100%;
			height: 120upx;
			line-height: 120upx;
			display: flex;
			justify-content: space-between;
			.left{
				width: 70%;
				height: 100%;
				font-size: 32upx;
				padding-left: 30upx;
			}
			button{
				width: 30%;
				height: 100%;
				line-height: 120upx;
				font-size: 30upx;
				background-color: #000;
				color: #fff;
				border-radius: 0;
			}
		}
	}
</style>
